<template>
  <p>
    <button @click="undo"> 撤销 </button>
    <button @click="redo"> 还原 </button>
  </p>
  <textarea v-model="text" />
  <ul>
    <li v-for="entry in history" :key="entry.timestamp">
      {{ entry }}
    </li>
  </ul>
</template>

<script setup>
import { useRefHistory } from '@vueuse/core'
import { ref } from 'vue'

const text = ref('')
const { history, undo, redo } = useRefHistory(text)

</script>

<style scoped>
button {
  border: none;
  outline: none;
  margin-right: 10px;
  background-color: #2ecc71;
  color: white;
  padding: 5px 10px;
}
</style>